<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 让网页的宽度自动适应手机屏幕的宽度。initial-scale - 初始的缩放比例,user-scalable - 用户是否可以手动缩放 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>fullpage.js全屏滚动插件</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css">
	<style>
		body{
			color: #fff;
		}
		ul li {
			list-style: none;
		}
		ul li a{
			text-decoration: none;
		}
		#fullpage{
			text-align: center;
		}
		.slide{
			font-size: 24px;
		}
		#header{
			position: fixed;
			font-size: 30px;
			top: 0;
			right: 150px;
			background: black;
		}
		#fullpageMenu{
			position: fixed;
			top: 0;
			z-index: 999;
		}
	</style>
</head>
<body>
	<div id="header">hello</div>
	<ul id="fullpageMenu">
		<li data-menuanchor="page1" class="active"><a href="#page1">1section</a></li>
		<li data-menuanchor="page2" ><a href="#page2">2section</a></li>
		<li data-menuanchor="page3" ><a href="#page3">3section</a></li>
		<li data-menuanchor="page4" ><a href="#page4">4section</a></li>
	</ul>
	<div id="fullpage">
		<div class="section">内容1</div>
		<div class="section">
			<div class="slide">幻灯片1</div>
			<div class="slide">幻灯片2</div>
			<div class="slide">幻灯片3</div>
			<div class="slide">幻灯片4</div>
		</div>
		<div class="section active">内容3</div>
		<div class="section">内容4</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#fullpage").fullpage({
				sectionsColor:["red","orange","yellow","green"],     /*为每一个section设置背景颜色*/
				//controlArrows:false,     /*用来控制幻灯片两侧的箭头是否出现,默认值为true*/
				//verticalCentered:true,   /*每一页的内容是否垂直居中，默认值为true*/
				//resize:true,             /*字体是否随窗口缩放而缩放，默认值为false*/
				//scrollingSpeed:2000,     /*滑动的速度*/
				anchors:['page1','page2','page3','page4'],           /*定义锚链接*/
				//lockAnchors:              /*是否锁定锚链接*/
				//easing:                   /*定义页面section滚动的动画方式，默认值为easeInOutCubic,如果修改的话，需要引入jquery.easing.js插件或jQuery ui*/
				//css3:true,                 /*是否使用css3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jQuery来替代css3实现滚动效果。*/
				//loopTop:true,              /*滚动到最顶部后是否连续滚动到底部，默认值为false。*/
				//loopBottom:true,           /*滚动到最底部后是否连续滚动回到顶部，默认值为false。*/
				loopHorizontal:true,       /*横向slider幻灯片是否循环滚动，默认值为true*/
				//autoScrolling:false, /*是否使用插件的滚动方式，默认值为true，如果选择false，则会出现浏览器自带的滚动条*/
				//scrollBar:true,         /*是否包含滚动条，默认为false，感觉这个没有什么效果*/
				//paddingTop:"100px",       /*设置每一个section顶部和底部的padding*/
				//paddingBottom:"0px",
				//fixedElements:"#header",   /*固定头部*/
				//keyboardScrolling:true,     /*是否可以使用键盘方向键导航，默认为true*/
				//touchSensitivity:100,     在移动设备中滑动页面的敏感性，默认为5，按百分比来衡量，最高为100，越大则越难滑动。
				continuousVertical:true,      
				/*是否循环滚动，默认为false，这个属性和loopTop、loopBottom不能同时设置,且不会像它们一样跳动*/
				//animateAnchor:false, 
				//recordHistory:true,          /*是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。*/
				//menu:"#fullpageMenu",  
				/*绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jQuery选择器*/
				//navigation:true,  /*是否显示导航，默认为false。如果设置true，会显示小圆点，作为导航*/
				//navigationPosition:"left",     /*导航小圆点的位置，可以设置为left或者right*/
				//navigationTooltips:['page1','page2','page3','page4'], /*导航小圆点的tooltips设置，默认为[]，注意按照顺序设置*/
				//showActiveTooltip:false,       /*是否显示当前页面的导航的tooltip信息，默认为false*/
				//slidesNavigation:true,        /*是否显示横向黄灯片的导航，默认为false*/
				//slidesNavPosition:"bottom",       /*横向幻灯片导航的位置，默认为bottom，可以设置为top或bottom*/
				//scrollOverflow:false,          
				/*内容超过满屏后是否显示滚动条，默认为false 如果设置true，则需要引入jQuery.slimscroll插件才能看到内容*/
				//sectionSelector:".section",       /*section的选择器，默认为.section，通过这样的方式更改选择器的名字*/
				//slideSelector:".slide",           /*slide的选择器，默认为.slide，通过这样的方式更改选择器的名字*/
				 /*向上滚动一页*/
				//moveSectionDown()  /*向下滚动一页*/
				//moveTo(section,slide)               /*滚动到第几页，第几个幻灯片，注意，页面是从1开始，而幻灯片是从0开始*/
			});
		})
	</script>
</body>
</html>